<script setup>
import { ref, watch } from 'vue'
import { Search, UserFilled, Edit } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const activeIndex = ref(route.path)
const searchInput = ref('')

watch(
  () => route.path,
  (newValue) => {
    activeIndex.value = newValue
  },
)

const searchContent = () => {
  router.push({ path: '/mainlayout/searchresult', query: { search: searchInput.value } })
  searchInput.value = ''
}
</script>

<template>
  <div class="main_layout">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header_top">
        <!-- 网站logo + 左侧导航项 -->
        <div class="header_top_left">
          <img class="logo" src="/public/images/logo.png" alt="" />
          <el-menu
            class="main-menu"
            :default-active="activeIndex"
            mode="horizontal"
            :router="true"
            background-color="transparent"
            text-color="#4a4a4a"
            active-text-color="#1E80FF"
          >
            <el-menu-item class="item_index" index="/mainlayout/blogindex">博客</el-menu-item>
            <el-menu-item class="item_index" index="/mainlayout/mineindex">我的</el-menu-item>
          </el-menu>
        </div>

        <!-- 右侧搜索框 + 写文章按钮 + 个人头像 -->
        <div class="header_top_right">
          <el-input
            class="search_input"
            v-model="searchInput"
            placeholder="搜索"
            @keyup.enter="searchContent"
          >
            <template #append>
              <el-button :icon="Search" @click="searchContent" />
            </template>
          </el-input>

          <el-button type="primary" size="default" @click="$router.push('/publishblog')">
            <el-icon size="large" class="el-icon--left"><Edit /></el-icon>
            <span style="font-size: medium">写博文</span>
          </el-button>

          <el-dropdown placement="bottom">
            <el-avatar :icon="UserFilled" :size="40" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item class="dropdown-item">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="el-fade-in-linear" mode="in-out">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main_layout {
  width: 100%;
  min-height: 100vh;
  background-color: #efefef;

  .header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;

    .header_top {
      width: 100%;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;

      .header_top_left {
        margin-left: 100px;
        display: flex;
        width: 600px;
        .logo {
          width: 50px;
          height: 50px;
        }

        .main-menu {
          margin-left: 100px;
          height: 100%;
          flex: 1;
          .item_index {
            width: 100px;
            font-size: medium;
          }
        }

        .el-menu-item.is-active {
          background-color: transparent !important;
          font-weight: 800;
          border-bottom: 3px solid;
        }
        .el-menu-item:hover {
          background-color: rgba(30, 128, 255, 0.1) !important;
        }
      }

      .header_top_right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .search_input {
          width: 350px;
          height: 55%;
          font-size: medium;
        }
      }
    }
  }

  .content {
    min-width: 100%;
  }
}
</style>
